/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Structure.css
 * This file contains structure for the application.
 * All universal conponents that don't need page specific namespacing should go below.
 * Examples of things that should go in structure:
 * - setting default html styles
 * - resuable javascript components' default styles
 * - page level messaging
 * - application navigation styles
 *
 * Measurements should all be in "em" unless it is a border.
 * 1em = 12px
 *
 * Quick guide to conversions:
 *      1px = .0833em
 *      2px = .1666em
 *      4px = .25em
 *      5px = .4166em
 *      6px = .5em
 *      10px = .8333em
 *      12px = 1em
 *      14px = 1.1666em
 *      16px = 1.3333em
 *      18px = 1.25em
 */

* {
  font-size: 1em;
  line-height: 1.167em;
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  font-size: 75%;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

input,
button {
  font-family: Arial, Helvetica, sans-serif;
}

img {
  border: 0;
}

ul {
  float: left;
}

ul.artifacts {
  float: none;
}

li {
  float: left;
  list-style: none;
}

a {
  cursor: pointer;
  color: #1f66bd;
  text-decoration: none;
}

a:hover {
  color: #2980ec;
}

a.tab_button_body_match_text {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

h1,
h1 strong {
  font-size: 2em;
  font-weight: normal;
}

h2,
h2 strong {
  font-size: 2em;
  font-weight: 300;
}

h3,
h3 strong {
  font-size: 14px;
  margin-bottom: 0.5em;
}

pre,
code {
  font-family: consolas, monaco, menlo, courier;
  font-size: 13px;
}

th {
  text-align: left;
}

.secondary {
  font-size: 0.9166em;
  color: #555;
  font-weight: normal;
}

.hidden {
  display: none;
}

/*
 * Buttons
 */
button,
a.link_as_button {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: visible; /* removes extra side padding in IE */
  font-weight: normal;
}

button::-moz-focus-inner,
a.link_as_button::-moz-focus-inner {
  border: none;  /* overrides extra padding in Firefox */
}

button span,
a.link_as_button span {
  position: relative;
  display: block;
  white-space: nowrap;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari and Google Chrome only - fix margins */
  button span,
  a.link_as_button span {
    margin-top: -1px;
  }
}

/* shared all buttons */

button.submit,
button.submit:hover,
button.submit_hover,
a.link_as_button,
a.link_as_button:hover,
a.link_as_button_hover,
button.submit.disabled,
button.submit.disabled:hover,
button.submit.disabled_hover,
a.link_as_button.disabled,
a.link_as_button.disabled:hover,
a.link_as_button_hover.disabled {
  padding: 6px 8px;
  margin-right: 5px;
  text-align: center;
  background: #444 image_url("g9/backgrounds/overlay_gradient_button.png") repeat-x bottom left;
  border-radius: 4px;
  font-size: 10px !important;
  text-transform: uppercase;
}

a.link_as_button {
  float: left;
}

button.submit,
a.link_as_button {
  color: #fff;
}

/* pipeline module buttons */

.operate button.submit,
.deploy button.submit {
  background-color: #f6f6f6;
}

.operate button.submit span,
.deploy button.submit span {
  color: #333;
}

.operate button.submit:hover,
.deploy button.submit:hover {
  background-color: #555;
}

.operate button.submit:hover span,
.deploy button.submit:hover span {
  color: #fff;
}

button.submit span,
a.link_as_button span {
  padding: 0;
  color: #fff;
  font-size: 10px !important;
  height: auto;
  background: none;
}

button.submit:hover,
button.submit_hover,
a.link_as_button:hover,
a.link_as_button_hover { /* the redundant class is used to apply the hover state with a script */
  background-color: #666;
  color: #fff;
  height: auto;
}

button.submit:hover span,
button.submit_hover span,
a.link_as_button:hover span,
a.link_as_button_hover span {
  padding: 0;
  color: #fff;
  height: auto;
}

* html button.submit {
  m: expression(this.onmouseover=new function("this.className = 'submit_hover';"));
}

* html button.submit_hover {
  m: expression(this.onmouseout=new function("this.className = 'submit';"));
}

* html a.link_as_button {
  width: 0;
}

* html a.link_as_button_hover {
  width: 0;
}

* html a.link_as_button_hover span {
  white-space: nowrap;
  display: inline-block;
  position: relative;
}

button.submit.disabled,
button.submit.disabled:hover {
  cursor: default;
  background-color: #f3f3f3;
}

button.submit.disabled:hover span {
  padding: 0;
  height: auto;
}

button.submit.disabled span,
a.link_as_button.disabled span,
a.link_as_button.disabled span:hover,
a.link_as_button_hover.disabled span {
  color: #afafaf;
}

/* Select Button (drop down) styles */
button.submit span img,
button.submit:hover span img,
button.submit_hover span img {
  position: relative;
  top: -0.08333em;
  margin-left: 5px;
  margin-right: -2px;
}

/* these shoudl just be links */

a.xlink_as_button {
  margin-left: 0.5em;
  float: left;
}

/**
 * Notifications
 */
.flash {
  text-align: center;
  margin: 0 auto;
  width: 50em;
}

* + html .flash {
  width: auto;
}

.flash p {
  background-color: #fff1a8;
  width: 50em;
  padding: 0.5em;
}

.alert {
  background-color: #fff1a8;
}

.loading {
  background: image_url("new/ajax_loader_small.gif") 50% 50% no-repeat transparent;
}

/*
 * Global Pass/Fail colors
 */
.Passed {
  background-image: image_url("g9/backgrounds/bg_status_gradient.png");
  background-repeat: repeat-x;
  background-color: #78c42d;
}

.Failed {
  background-image: image_url("g9/backgrounds/bg_status_gradient.png");
  background-repeat: repeat-x;
  background-color: #fa2d2d;
}

.Failing {
  background-image: image_url("failing.png");
  background-repeat: repeat-x;
  background-color: #fa2d2d;
}

.Unknown {
  background: image_url("g9/backgrounds/bg_state_unknown.png") no-repeat right;
}

.Building,
.Active {
  background-image: image_url("building.png");
  background-repeat: repeat-x;
  background-color: #ffc11b;
}

.Cancelled {
  background-image: image_url("building.png");
  background-repeat: repeat-x;
  background-color: #ffc11b;
  text-align: center;
}

/**
 * Visualizations for pass/fail of a stage
 */
.color_code {
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  float: left;
  overflow: hidden;
}

.color_code_small {
  float: left;
  height: 12px;
  width: 12px;
  margin-right: 5px;
  margin-top: 0;
  overflow: hidden;
}

* + html .color_code_small {
  width: 1em;
  height: 1em;
}

* + html .color_code_small img {
  position: relative;
  top: -2px;
  left: 0;
}

.color_code_stage {
  width: 36px;
  height: 12px;
  margin-right: 5px;
  float: left;
  overflow: visible;
}

.user a:hover {
  color: #fff;
}

.pipeline_history h2.entity_title,
.yui-b .Job h2.entity_title,
.job_details h1.entity_title,
#admin-page .Administration h2.entity_title,
.Server h2.entity_title {
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  margin: 0;
  border: 0;
  background-repeat: no-repeat;
  border: 0 none;
  color: #3d3d3d;
  font-size: 21px;
  padding: 0;
}

/*
 * Misc Pipeline stuff?
 */
.pipeline .stages .stage {
  float: left;
}

.stage_history .stage.selected {
  border: 1px solid #ccc;
}

/* Stage bars for pipeline groups/environments */

.pipeline .stages .stage_bar {
  min-height: 12px;
  max-height: 12px;
  margin-top: 10px;
  display: block;
  line-height: 12px;
  margin-right: 4px;
}

.pipeline .stages .last_run_stage {
  border-bottom: 5px solid #999;
  padding-bottom: 0.25em;
  margin-right: 4px;
}

.pipeline .stages .last_run_stage .stage_bar {
  margin-right: 0;
}

.pipeline_flow .pipeline .stages {
  width: 100%;
}

* + html #pipelines .pipeline_flow .stage_bar,
* + html #stages .pipeline_flow .stage_bar, {
  height: 1em;
}

.pipeline_flow .pipeline .stages .stage .stage_name {
  float: left;
}

.pipeline_flow .pipeline .stages .stage .operate {
  font-size: 0.75em;
  margin-left: 0.5em;
  float: left;
}

.pipeline_flow .pipeline .stages .stage .operate .stage_action {
  color: #ccc;
  position: relative;
  top: 0.0833em;
}

.pipeline_flow .pipeline .stages .selected .operate .stage_action {
  color: #666;
}

.enhanced_dropdown {
  background-color: #fff;
  float: left;
  z-index: 2;
  position: absolute;
  top: auto;
  left: auto;
  border: 1px solid #8d8d8d;
}

.enhanced_dropdown,
.enhanced_dropdown .scrollable_panel {
  max-height: 17em;
  overflow: auto;
  border-bottom: 1px solid #8d8d8d;
  border-top: 1px solid #d4d4d4;
  border-right: 1px solid #d4d4d4;
  border-left: 1px solid #d4d4d4;
  padding: 1em;
}

* + html .enhanced_dropdown,
* + html .enhanced_dropdown .scrollable_panel {
  height: expression(this.scrollheight >  204 ? "17em" : "auto");
}

.enhanced_dropdown .scrollable_panel .selectors{

}

.overview_widget {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}

.content_wrapper_inner {
  border: 0;
  background-color: #fff;
  padding: 15px;
}

/*
 * Sub Tabs
 */
.sub_tabs_container {
  background: #999 image_url("g9/backgrounds/overlay_bottom_inside_shadow.png") bottom repeat-x !important;
  border: 0 !important;
  padding: 10px 10px 0 10px;
  margin-bottom: 10px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  list-style: none outside none;
}

.sub_tabs_container li {
  display: block;
  float: left;
  margin-right: 5px;
  padding: 0;
}

.sub_tabs_container .current_tab {
  background: none !important;
  position: relative;
}

.sub_tabs_container li a {
  font-size: 11px;
  padding: 7px 12px;
  display: block;
  border: 0 !important;
  background-color: #333;
  color: #fff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.sub_tabs_container li a:hover {
  background-color: #555;
  color: #fff;
}

.sub_tabs_container li.current_tab a,
.sub_tabs_container li.current_tab a:hover {
  background-color: #fff;
  color: #000;
  font-weight: normal;
}

/*
 * Tables
 */
table {
  border-collapse: collapse;
}

.list_table {
  width: 100%;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px #bbb;
}

.list_table th,
.list_table td {
  padding: 8px 10px 8px 10px;
}

.list_table td {
  border-bottom: 1px dotted #ddd;
}

.list_table th {
  border-bottom: 1px solid #ddd;
  background: #eee image_url("g9/backgrounds/overlay_gradient_th.png") repeat-x;
  white-space: nowrap;
}

.list_table th a {
  color: #333;
}

.list_table .Disabled {
  color: #999;
}

.required .asterisk {
  color: #c00;
}

#header::after,
#body::after,
#footer::after,
.content::after,
#header .pipeline_flow .pipeline::after,
.page_title_bar::after,
.content_wrapper_inner::after,
.content_wrapper_outer::after,
.overview_widget::after,
.pipeline_flow .pipeline .stages .stage .row1::after,
.sub_tabs_container::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

* html {
  #header,
  #body,
  #footer,
  .content,
  #header .pipeline_flow .pipeline,
  .page_title_bar,
  .content_wrapper_inner,
  .content_wrapper_outer,
  .overview_widget,
  .pipeline_flow .pipeline .stages .stage .row1,
  .sub_tabs_container,
  .content_wrapper_outer,
  .content_wrapper_inner,
  .pipelines,
  .entity_status_wrapper {
    display: inline-block;
    height: 1%;
  }
}

* + html #header,
* + html #body,
* + html #footer,
* + html .content,
* + html #header .pipeline_flow .pipeline,
* + html .page_title_bar,
* + html .content_wrapper_inner,
* + html .content_wrapper_outer,
* + html .overview_widget,
* + html .pipeline_flow .pipeline .stages .stage .row1,
* + html .sub_tabs_container,
* + html .content_wrapper_outer,
* + html .content_wrapper_inner,
* + html .pipelines,
* + html .entity_status_wrapper {
  display: inline-block;
  height: 1%;
}
